<template>
  <div>
    <div class="form">
      <div class="search">
        <el-input placeholder="客户名称" v-model="customerName" class="search_info">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-input placeholder="产品名称" v-model="productName" class="search_info">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-select v-model="mortgageStatus" placeholder="抵押状态" class="search_info">
          <el-option
            v-for="item in mortgageList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
        <div class="pos_right_btn">
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="getList(1)" class="searchBtn">搜索</el-button>
        </div>
      </div>
      <el-table
        class="listTable"
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" >
          
        </el-table-column>-->
        <el-table-column label="业务流水号" sortable prop="id" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.applyId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.customerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区域" align="center">
          <template slot-scope="{row}">
            <span>{{ row.branchName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" width="160" align="center">
          <template slot-scope="{row}">
            <span>{{ row.productName }}</span>
            <span v-if="!row.productName">定制需求</span>
          </template>
        </el-table-column>
        <el-table-column label="放款合同号" sortable align="center">
          <template slot-scope="{row}">
            <span>{{ row.loanContractNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款额度(万元)" align="center">
          <template slot-scope="{row}">
            <span>{{ row.loanAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款开始时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.loanStart }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款到期时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.loanEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷款状态" align="center">
          <template slot-scope="{row}">
            <span>{{ row.settleds }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管户机构" align="center">
          <template slot-scope="{row}">
            <span>{{ row.deptName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管户人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预警数量" align="center">
          <template slot-scope="{row}">
            <span>{{ row.signalCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="{row}">
            <div class="opt_table">
              <div
                class="opt_font"
                @click="preview(row.applyId, row.customerId,  row.customerName, row.flowUid, row.id, row.productType, row.dateFlag, row.loanFlag, row)"
              >详情</div>
              <div class="opt_font" @click="showCome(row)">还款</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div class="footer_btn">
          <!-- <el-button type="primary">批量抢单</el-button> -->
        </div>
        <el-pagination
          :total="total"
          layout="total, sizes, prev, pager, next"
          :page-size="limit"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          :current-page.sync="curPage"
          @current-change="getList($event)"
          class="sortStyle"
        />
      </div>
      <el-dialog :visible.sync="detailShow" title="订单详情" width="1096px">
        <div class="tab">
          <!-- <el-button type="info" plain @click="tabChange('2')">中止授信</el-button>
          <el-button type="success" plain @click="mortgage()">在线抵押</el-button>-->
          <el-button type="danger" plain @click="tabChange('3')" :disabled="fullInfo.settled">还款</el-button>
          <!-- <el-button
            type="primary"
            plain
            @click="showTo(reqId, customerId, customerName, flowUid, approveId)"
          >放款</el-button>-->
        </div>
        <div>
          <div class="dia_top">
            <div class="pad_right">
              订单编号：
              <span class="dia_color">{{taskNo}}</span>
            </div>
            <div>
              申请时间：
              <span class="dia_color">{{createTime}}</span>
            </div>
          </div>
          <div class="flex_row">
            <div>
              <div class="statuBtn">已授信</div>
              <div class="statuBtns" v-if="status1 == '1010'">担保审核中</div>
              <div class="statuBtns" v-if="status1 == '2000'">已担保</div>
              <div class="statuBtns" v-if="status1 == '3000'">担保已拒绝</div>
              <div class="statuBtns" v-if="status1 == ''">未担保</div>
              <div class="statuBtns" v-if="status2 == '1010'">抵押审核中</div>
              <div class="statuBtns" v-if="status2 == '2000'">已抵押</div>
              <div class="statuBtns" v-if="status2 == '3000'">抵押已拒绝</div>
              <div class="statuBtns" v-if="status2 == ''">未抵押</div>
            </div>
            <div class="step_top">
              <div class="step">
                <div class="step_width">订单生成</div>
                <div class="step_width">审核</div>
                <div class="step_width">授信</div>
                <div class="step_width">放款</div>
              </div>
              <el-steps align-center space :active="stepNum">
                <el-step
                  v-for="item in stepList"
                  :key="item.id"
                  :title="item.createTime"
                  :description="item.createBy"
                ></el-step>
              </el-steps>
            </div>
          </div>
          <el-tabs v-model="infoShow" type="card">
            <el-tab-pane label="基本信息" name="0">
              <div class="detail_title pos_top">
                <span></span>
                需求信息
              </div>
              <el-table
                class="detailTable"
                v-loading="listLoading"
                :data="needData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column label="需求编号" prop="id" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.reqId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="企业名称" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.customerName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="申请产品" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.productName }}</span>
                    <span v-if="!row.productName">定制需求</span>
                  </template>
                </el-table-column>
                <el-table-column label="担保方式" align="center">
                  <template slot-scope="{row}">
                    <span v-if="row.guaranteeType == '' || row.guaranteeType == 9">不限</span>
                    <span v-if="row.guaranteeType === '0'">抵押</span>
                    <span v-if="row.guaranteeType == 1">质押</span>
                    <span v-if="row.guaranteeType == 2">信用</span>
                    <span v-if="row.guaranteeType == 3">一般保证</span>
                  </template>
                </el-table-column>
                <el-table-column label="原贷款银行" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.bizRenewLoanInfos[0].originalBank }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="原贷款金额(万元)" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.bizRenewLoanInfos[0].originalLoanAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="原贷款到期日" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.bizRenewLoanInfos[0].originalLoanEndTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="原贷款担保方式" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span
                      v-if="row.bizRenewLoanInfos[0].originalGuaranteeType == ''|| row.bizRenewLoanInfos[0].originalGuaranteeType == 9"
                    >不限</span>
                    <span v-if="row.bizRenewLoanInfos[0].originalGuaranteeType === '0'">抵押</span>
                    <span v-if="row.bizRenewLoanInfos[0].originalGuaranteeType == 1">质押</span>
                    <span v-if="row.bizRenewLoanInfos[0].originalGuaranteeType == 2">信用</span>
                    <span v-if="row.bizRenewLoanInfos[0].originalGuaranteeType == 3">一般保证</span>
                  </template>
                </el-table-column>
                <el-table-column label="同意续贷银行" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.bizRenewLoanInfos[0].allowBank }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="申请续贷过桥资金(万元)" align="center" v-if="proType == '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.bizRenewLoanInfos[0].bridgeAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="融资金额(万元)" align="center" v-if="proType != '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.financeAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="融资期限(月)" align="center" v-if="proType != '04'">
                  <template slot-scope="{row}">
                    <span>{{ row.financeTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="联系人" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.conName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="联系电话" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.conPhone }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div v-if="proType == '06'">
                <div class="detail_title pos_top">
                  <span></span>
                  抵质押物信息
                </div>
                <el-table
                  class="detailTable"
                  :data="goodsList"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%;"
                >
                  <el-table-column label="序号" type="index" align="center">
                    <!-- <template slot-scope="{row}">
                <span>{{ row.bizApplyGuaranteePledgeRelativeList }}</span>
                    </template>-->
                  </el-table-column>
                  <el-table-column label="抵质押物类型" align="center">
                    <template slot-scope="{row}">
                      <span v-if="row.relativeType == '03'">抵押物</span>
                      <span v-if="row.relativeType == '02'">质押物</span>
                      <span v-if="row.relativeType == '04'">担保合同</span>
                      <span v-if="row.relativeType == '01'">房产</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预估价值(万元)" align="center">
                    <template slot-scope="{row}">
                      <span>{{ row.estimatedAmount / 10000 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="detail_title pos_top top_more">
                <div class="det_flex">
                  <div>
                    <span></span>
                    企业详情
                  </div>
                  <div class="comBtn">
                    <el-button
                      plain
                      type="danger"
                      @click="toMoveCreditReport(customerId)"
                      class="btnCol"
                      :loading="showLoading1"
                    >信用报告</el-button>
                    <el-button plain type="danger" @click="toMoveAx(entName)" class="btnCol">关联图谱</el-button>
                    <el-button
                      plain
                      type="danger"
                      @click="toMoveAxScore(customerId)"
                      class="btnCol"
                    >信用分</el-button>
                    <el-button
                      plain
                      type="danger"
                      @click="toMoveBlackName(customerId)"
                      class="btnCol"
                      :loading="showLoading"
                    >黑名单</el-button>
                  </div>
                </div>
              </div>
              <div class="detail_info">
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">企业名称</div>
                    </div>
                    <div class="info_left_content">{{listData.name}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">统一社会信用代码</div>
                    </div>
                    <div class="info_left_content">{{listData.uniscId}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">企业类型</div>
                    </div>
                    <div class="info_left_content">{{listData.econat}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">经营状态</div>
                    </div>
                    <div class="info_left_content">{{listData.entState}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">所属行业</div>
                    </div>
                    <div class="info_left_content">{{listData.industry}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">成立时间</div>
                    </div>
                    <div class="info_left_content">{{parseTime(listData.estDate,'{y}-{m}-{d}')}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">公司类型</div>
                    </div>
                    <div class="info_left_content">{{listData.entTypeName}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">法定代表人</div>
                    </div>
                    <div class="info_left_content">{{listData.legalPerson}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">发照日期</div>
                    </div>
                    <div class="info_left_content">{{parseTime(listData.apprDate,'{y}-{m}-{d}')}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">企业地址</div>
                    </div>
                    <div class="info_left_content">{{listData.address}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title">
                      <div class="font">注册资本(万元)</div>
                    </div>
                    <div class="info_left_content">{{listData.regcap}}</div>
                  </div>
                  <div class="info_right">
                    <div class="info_left_title">
                      <div class="font">行政区划</div>
                    </div>
                    <div class="info_left_content">{{listData.branchNo}}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="info_left">
                    <div class="info_left_title" style="height:unset">
                      <div class="font">经营范围</div>
                    </div>
                    <div class="info_left_contents">{{listData.opScope}}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="担保信息" name="1">
              <el-table
                class="detailTable"
                v-loading="listLoading"
                :data="provinceData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column label="序号" align="center" type="index"></el-table-column>
                <el-table-column label="业务流水号" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.bizWarrantInfo.applyId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="申请时间" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.bizWarrantInfo.publishDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="担保机构" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.warrantDeptName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="业务进度" align="center">
                  <template slot-scope="{row}">
                    <span v-if="row.bizWarrantInfo.status == '1010'">处理中</span>
                    <span v-if="row.bizWarrantInfo.status == '2000'">已通过</span>
                    <span v-if="row.bizWarrantInfo.status == '3000'">已拒绝</span>
                  </template>
                </el-table-column>
                <el-table-column label="担保额度(万元)" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.bizWarrantInfo.approveAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="担保期限(月)" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.bizWarrantInfo.guaranteeTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="担保利率(%)" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.bizWarrantInfo.guaranteeRadio }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="授信信息" name="2">
              <el-table
                class="detailTable"
                v-loading="listLoading"
                :data="creditData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column label="授信合同号" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.approveContractNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="授信金额(万元)" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.approveAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="授信开始日" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.approveStart }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="授信到期日" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.approveEnd }}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" align="center">
                  <template slot-scope="{row}">
                    <div class="opt_table">
                      <div class="opt_font" @click="checkShow = true">中止授信</div>
                    </div>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="放款信息" name="3">
              <el-table
                class="detailTable"
                v-loading="listLoading"
                :data="giveData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column label="序号" type="index" align="center">
                  <!-- <template slot-scope="{row}">
                    <span>{{ row.loanId }}</span>
                  </template>-->
                </el-table-column>
                <el-table-column label="放款合同号" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.loanContractNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="放款金额（万元）" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.loanAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="放款利率（%）" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.loanRatio }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="贷款起始日" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.loanStart }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="贷款到期日" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.loanEnd }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="未归还金额（万元）" width="180" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.unRepaymentAmount }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                  <template slot-scope="{row}">
                    <div class="opt_table">
                      <div class="opt_font" @click="showCome(row)">还款</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <div
                class="addIcon"
                @click="showTo(reqId, customerId, customerName, flowUid, approveId)"
              >
                <img src="../../../assets/icons/svg/addCredit.png" />
                新增
              </div>-->
            </el-tab-pane>
            <el-tab-pane label="抵押信息" name="4">
              <el-table
                class="detailTable"
                v-loading="listLoading"
                :data="loanData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column label="贷款合同号" prop="id" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.approveContractNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="抵押合同号" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.pledgeId }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="产权证号" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.propertyCard }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="产权人" align="center">
                  <template slot-scope="{row}">
                    <span>{{ row.propertyPerson }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="抵押状态" align="center">
                  <template slot-scope="{row}">
                    <span v-if="row.status == '1010'">处理中</span>
                    <span v-if="row.status == '2000'">已通过</span>
                    <span v-if="row.status == '3000'">已拒绝</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <div class="loan">
        <el-dialog :visible.sync="loanShow" title="新增还款" width="666px">
          <div class="centers">
            <div class="flex_row pad_top">
              <div class="font_info">放款合同号</div>
              <el-input v-model="loanContractNoBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">放款金额（万元）</div>
              <el-input v-model="loanAmountBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">担保方式</div>
              <el-input v-model="guaranteeTypeBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">放款利率（%）</div>
              <el-input v-model="loanRatioBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">贷款开始日</div>
              <el-input v-model="loanStartBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">贷款结束日</div>
              <el-input v-model="loanEndBack" class="input_info" readonly />
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">还款日期</div>
              <el-date-picker
                v-model="repaymentDate"
                type="date"
                class="input_info"
                placeholde="请输入还款日期"
                value-format="yyyy-MM-DD"
              ></el-date-picker>
            </div>
            <div class="flex_row pad_top">
              <div class="font_info">还款金额(万元)</div>
              <el-input v-model="repaymentAmount" class="input_info" />
            </div>
            <div class="footers">
              <el-button @click="close()">返回</el-button>
              <el-button type="primary" class="searchBtn" @click="backMoney(loanId)">还款</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  insertRepaymentInfo,
  unsettledloanList,
  dictType,
  getArea,
  redirect,
  creditReport,
  axScoreRedirect,
  redireblackNameListct,
  getBizApplyInfo,
  getRecordList
} from "@/api/system/user";
import { MessageBox } from "element-ui";
export default {
  components: {},
  data() {
    return {
      userName: "",
      areaCode: "",
      work: "",
      load: "",
      date: "",
      value: "",
      status: [],
      list: [],
      listLoading: false,
      total: 0,
      limit: 10,
      curPage: 1,
      listData: [],
      detailShow: false,
      needData: [],
      taskNo: "",
      createTime: "",
      entName: "",
      status1: "",
      stepNum: null,
      stepList: [],
      infoShow: "0",
      proType: "",
      showLoading1: false,
      showLoading: false,
      creditReports: false,
      reportHtml: "",
      status2: "",
      customerName: "",
      productName: "",
      mortgageStatus: "",
      mortgageList: [],
      areaList: [],
      loanShow: false,
      loanContractNoBack: "",
      loanAmountBack: "",
      guaranteeTypeBack: "",
      loanRatioBack: "",
      loanStartBack: "",
      loanEndBack: "",
      repaymentDate: "",
      repaymentAmount: "",
      provinceData: [],
      giveData: [],
      loanData: [],
      creditData: [],
      fullInfo: "",
      loanWayList: []
    };
  },
  created() {},
  mounted() {
    this.dictType();
    this.dictType1();
    this.getArea();
    this.getList(1);
  },
  methods: {
    dictType1() {
      dictType("guarantee_type").then(res => {
        res.data.forEach(element => {
          this.loanWayList.push({
            key: element.dictValue,
            value: element.dictLabel
          });
        });
      });
    },
    tabChange(val) {
      this.infoShow = val;
    },
    /** 跳转安信图谱 */
    toMoveAx(entName) {
      this.listLoading = true;
      redirect(entName).then(res => {
        this.listLoading = false;
        if (res.code == 200) {
          if (res.data) {
            let url =
              res.data.url +
              "?username=" +
              res.data.username +
              "&channel=" +
              res.data.channel +
              "&name=" +
              res.data.name;
            window.open(url);
          }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    /** 跳转安信图谱 */
    toMoveAxScore(entName) {
      this.listLoading = true;
      axScoreRedirect().then(res => {
        this.listLoading = false;
        if (res.code == 200) {
          if (res.data) {
            let url = res.data.url + entName;
            window.open(url);
          }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    /** 黑名单 */
    toMoveBlackName(customerId) {
      this.listLoading = true;
      this.showLoading = true;
      redireblackNameListct(customerId).then(res => {
        this.showLoading = false;
        this.listLoading = false;
        if (res.code == 200) {
          if (res.data) {
            if (res.data.code == 200100 || res.data.code == 300100) {
              this.$msgbox(res.data.message, "系统提示", "warning");
            } else {
              if (res.data.rules.length) {
                this.$msgbox(res.data.rules, "系统提示", "info");
              } else {
                this.$msgbox("未触发黑名单", "系统提示", "info");
              }
            }
          }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    /** 信用报告 */
    toMoveCreditReport(customerId) {
      window.open(
        window.location.protocol +
          "//" +
          window.location.host +
          "/ecsc3/#/creditReport?val=" +
          customerId
      );
    },
    //还款
    backMoney(id) {
      var params = {
        loanId: id,
        repaymentAmount: this.repaymentAmount,
        repaymentDate: this.repaymentDate
      };
      insertRepaymentInfo(this.$qs.stringify(params)).then(res => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
        this.loanShow = false;
        this.detailShow = false;
        this.getList(1);
      });
    },
    //还款返回
    close() {
      this.loanShow = false;
    },
    showCome(data) {
      this.loanShow = true;
      this.loanId = data.id || data.loanId;
      this.loanContractNoBack = data.loanContractNo;
      this.loanAmountBack = data.loanAmount;
      this.loanWayList.forEach(element => {
        if (data.guaranteeType == element.key) {
          this.guaranteeTypeBack = element.value;
        }
      });
      this.loanRatioBack = data.loanRatio;
      this.loanStartBack = data.loanStart;
      this.loanEndBack = data.loanEnd;
      this.repaymentAmount = "";
      this.repaymentDate = "";
    },
    //抵押列表
    dictType() {
      dictType("mortgage_status").then(res => {
        res.data.forEach(element => {
          this.mortgageList.push({
            key: element.dictValue,
            value: element.dictLabel
          });
        });
      });
    },
    //区域列表
    getArea() {
      getArea().then(response => {
        this.areaList = response;
      });
    },
    reset() {
      this.customerName = "";
      this.productName = "";
      this.mortgageStatus = "";
    },
    doPrint(index) {
      this.$confirm(
        "如需下载安信小宝报告，可在打印预览页面将报告选择[另存为PDF]至本地",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }
      )
        .then(() => {
          this.executePrint();
        })
        .catch(() => {});
    },
    executePrint() {
      window.document.body.innerHTML = this.reportHtml;
      window.print();
      window.location.reload();
    },
    /** 查询用户列表 */
    getList(page) {
      var params = {
        pageNum: page,
        pageSize: this.limit,
        customerName: this.customerName,
        productName: this.productName,
        mortgageStatus: this.mortgageStatus
      };
      this.listLoading = true;
      unsettledloanList(params).then(response => {
        this.list = response.rows;
        this.list.forEach(element1 => {
          this.areaList.forEach(element2 => {
            if (element1.branchNo == element2.brhId) {
              element1.branchName = element2.brhName;
            }
          });
        });
        this.list.forEach(element => {
          if (!element.settled) {
            element.settleds = "未结清";
          } else {
            element.settleds = "已结清";
          }
        });
        this.total = response.total;
        this.listLoading = false;
      });
    },
    //多选
    handleSelectionChange(rows) {
      console.log(rows);
    },
    //任务详情
    preview(id, cid, cname, fid, aid, type, flag1, flag2, fullInfo) {
      this.checkFlag = false;
      if (flag1 == 0 && flag2 == 0) {
        this.checkFlag = true;
      }
      this.reqId = id;
      this.fullInfo = fullInfo;
      this.customerId = cid;
      this.flowUid = fid;
      this.status1 = "";
      this.proType = type;
      this.status2 = "";
      this.approveId = aid;
      this.entName = cname;
      this.needData = [];
      this.detailShow = true;
      this.listLoading = true;
      var params = {
        reqId: id
      };
      getBizApplyInfo(params).then(response => {
        this.infoTitle = response.customerName;
        this.listLoading = false;
        this.needData.push(response);
        this.createTime = response.createTime;
        this.taskNo = response.reqId;
        if (response.fspCorInf) {
          this.listData = response.fspCorInf;
        }
        if (response.bizApplyGuaranteePledgeRelativeList) {
          this.goodsList = response.bizApplyGuaranteePledgeRelativeList;
        }
        if (response.bizApplyWarrantRelativeList) {
          this.provinceData = response.bizApplyWarrantRelativeList;
          if (response.bizApplyWarrantRelativeList.length) {
            this.status1 =
              response.bizApplyWarrantRelativeList[0].bizWarrantInfo.status;
          }
        }
        this.giveData = response.bizLoanInfoList;
        this.creditData = response.bizApproveInfoList;
        if (response.bizPledgeInfoList) {
          this.loanData = response.bizPledgeInfoList;
          if (response.bizPledgeInfoList.length) {
            this.status2 = response.bizPledgeInfoList[0].status;
          }
        }
      });
      let rDate = {
        reqId: id,
        flowUid: fid
      };
      getRecordList(rDate).then(res => {
        // this.$nextTick(() => {
        this.stepNum = res.size;
        // })
        this.stepList = res.bizFlowInfoVoList;
      });
    },
    goback() {
      this.detailShow = false;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList(1);
    }
  }
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}

.search {
  display: flex;
  position: relative;
}

.search_info {
  width: 180px;
  height: 40px;
  margin-right: 16px;
}

.searchBtn {
  margin-left: 16px;
  height: 36px;
}

.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}

.pos_right_btn {
  position: absolute;
  right: 0;
}

.opt_font {
  cursor: pointer;
  color: #2e82ff;
}

.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}

.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}

.row {
  display: flex;
  /* padding-bottom: 12px; */
}

.detail_info {
  padding-top: 16px;
}

.info_left {
  display: flex;
}

.info_right {
  display: flex;
  /* padding-left: 202px; */
}

.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 256px;
  /* margin-right: 16px; */
  text-align: center;
  min-height: 47px;
  background: #f5f7fa;
  box-shadow: inset 0 -1px 0 0 #dcdfe6;
}

.info_left_title .font {
  position: relative;
  top: 14px;
}

.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 256px;
  /* border: 1px solid #DCDFE6; */
  box-shadow: inset -1px -1px 0 0 #dcdfe6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info_left_contents {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 769px;
  /* border: 1px solid #DCDFE6; */
  box-shadow: inset -1px -1px 0 0 #dcdfe6;
  text-align: left;
}

.pos_top {
  padding-top: 12px;
}

.top_more {
  margin-top: 8px;
}

.detailTable {
  margin-top: 16px;
}

.opt_font {
  color: #1e88e5;
  cursor: pointer;
}

.page_pos {
  text-align: right;
  padding-top: 10px;
}

.backBtn {
  text-align: center;
  margin-top: 10px;
}

.backBtns {
  text-align: center;
  /* margin-top:10px; */
}

/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  /* max-width: ; */
}

/deep/ .el-dialog__body {
  /* flex: 1; */
  height: 600px;
  overflow-y: auto;
  padding-top: 0;
}

.creditReport /deep/ .el-dialog__body {
  height: 600px;
}

.tab {
  display: flex;
  position: absolute;
  right: 55px;
  top: 14px;
}

.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  width: 82px;
  margin-right: 16px;
  text-align: center;
}

.change {
  border: 1px solid grey;
  color: grey;
  /* width: 82px; */
}

.changes {
  border: 1px solid #f56c6c;
  color: #f56c6c;
  /* width: 82px; */
}

.listTable {
  margin-top: 17px;
}

/deep/ .search_info .el-input__inner {
  width: 180px;
}

.date_picker /deep/ .el-input__inner {
  width: 240px;
}

.opt_table {
  display: flex;
  justify-content: space-around;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.footer_btn {
  position: relative;
  top: 20px;
}

.dia_top {
  display: flex;
}

.dia_color {
  color: #409eff;
}

.pad_right {
  padding-right: 16px;
}

.statuBtn {
  padding: 10px 14px;
  font-size: 14px;
  margin-right: 16px;
  border: 1px solid #f56c6c;
  color: #f56c6c;
  width: 102px;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 14px;
}

.statuBtns {
  padding: 10px 14px;
  font-size: 14px;
  margin-right: 16px;
  border: 1px solid #18b5a6;
  color: #18b5a6;
  width: 102px;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 14px;
}

.step_top {
  position: relative;
  top: 14px;
}

.step {
  display: flex;
  justify-content: space-around;
}

.step_width {
  width: 200px;
  text-align: center;
  padding-bottom: 8px;
}
.addIcon {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1890ff;
  cursor: pointer;
  height: 44px;
  border-left: 1px solid #dfe6ec;
  border-right: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.addIcon img {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}

.comBtn {
  display: flex;
  position: absolute;
  right: 0;
  top: -8px;
}

.det_flex {
  display: flex;
  position: relative;
}

.btnCol {
  margin-right: 14px;
}

.flex_row {
  display: flex;
  justify-content: center;
}

.tap {
  display: flex;
}

.tap_left {
  border: 1px solid #1e88e5;
  padding: 6px 8px;
  background: #1e88e5;
  color: #fff;
  cursor: pointer;
}

.tap_right {
  background: #1e88e5;
  border: 1px solid #1e88e5;
  padding: 6px 8px;
  margin-left: 10px;
  color: #fff;
  cursor: pointer;
}

.input_info {
  width: 200px;
}

.select_info {
  width: 200px;
}

.font_info {
  width: 120px;
  position: relative;
  top: 8px;
  text-align: right;
  margin-right: 20px;
}

.centers {
  /* display: flex; */
  text-align: center;
}

.pad_top {
  padding-top: 10px;
}

.footers {
  margin-top: 30px;
  text-align: center;
}

.apply /deep/ .el-dialog__body {
  height: 200px;
}

.credit /deep/ .el-dialog__body {
  height: 400px;
}

.loan /deep/ .el-dialog__body {
  height: 480px;
}

.addLoan /deep/ .el-dialog__body {
  height: 380px;
}

.change_blue {
  color: #35ca4b;
  border: 1px solid #35ca4b;
}

/deep/ .check .el-dialog__body {
  /* flex: 1; */
  height: 200px;
  overflow-y: auto;
  padding-top: 0;
}

.btn_top {
  padding-top: 20px;
}

.left_style {
  display: flex;
  padding-bottom: 16px;
}

.left_style .font {
  width: 130px;
  text-align: right;
  margin-right: 20px;
  position: relative;
  top: 8px;
}

.deal_style {
  display: flex;
  justify-content: center;
}
</style>
<style scoped src='../../../assets/styles/summernote.css'></style>
<style scoped src='../../../assets/styles/summernote-bs3.css'></style>
<style type="text/css">
#creditReport {
  font-family: SimSun;
}

#contents {
  padding: 20px;
}

@page {
  size: A4;
  margin: 0.25in;
  -fs-flow-bottom: "footer";
  -fs-flow-left: "left";
  -fs-flow-right: "right";
  padding: 12em;
  @bottom-right {
    content: counter(page) "/" counter(pages);
  }
}

#maindiv {
  width: 70%;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  margin-top: 30px;
  margin-left: 150px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(231, 233, 239);
}

.xiaobiao {
  text-decoration: none;
  color: black;
  text-align: center;
  display: inline-block;
  width: 120px;
  height: 36px;
  border: 1px solid #e2dddd;
  line-height: 36px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 300;
}

.buttonWrapper {
  position: fixed;
  margin-top: 10px;
  right: 22%;
  background: #fff;
}
</style>
<style rel="stylesheet" type="text/css" media="print">
#contents {
  padding-right: 20mm;
}
</style>